.avatar-group {
  @apply flex;

  :where(.avatar) {
    @apply overflow-hidden rounded-full;
    border: 2px solid var(--color-base-100);
  }
}

.avatar {
  @apply relative inline-flex align-middle text-base;

  & > div {
    @apply block aspect-square overflow-hidden;
  }

  & > span {
    @apply block aspect-square overflow-hidden;
  }
}

:where(.avatar) img {
  @apply h-full w-full object-cover;
}

.avatar-placeholder {
  & > div {
    @apply flex items-center justify-center;
  }

  & > span {
    @apply flex items-center justify-center;
  }
}
/* Pull up avatar style */
.pull-up {
  .avatar {
    @apply transition-all duration-250 ease-in;
    &:hover {
      @apply shadow-base-300/20 z-30 -translate-y-1 transform rounded-full shadow-sm;
    }
  }
}

.avatar-online-top {
  &:before {
    content: "";
    @apply bg-success outline-base-100 absolute z-10 block rounded-full outline outline-2;
    width: 20%;
    height: 20%;
    top: 3%;
    right: 3%;
  }
}
.avatar-offline-top {
  &:before {
    content: "";
    @apply bg-base-200 outline-base-100 absolute z-10 block rounded-full outline outline-2;
    width: 20%;
    height: 20%;
    top: 3%;
    right: 3%;
  }
}
.avatar-busy-top {
  &:before {
    content: "";
    @apply bg-error outline-base-100 absolute z-10 block rounded-full outline outline-2;
    width: 20%;
    height: 20%;
    top: 3%;
    right: 3%;
  }
}
.avatar-away-top {
  &:before {
    content: "";
    @apply bg-warning outline-base-100 absolute z-10 block rounded-full outline outline-2;
    width: 20%;
    height: 20%;
    top: 3%;
    right: 3%;
  }
}
.avatar-online-bottom {
  &:before {
    content: "";
    @apply bg-success outline-base-100 absolute z-10 block rounded-full outline outline-2;
    width: 20%;
    height: 20%;
    bottom: 3%;
    right: 3%;
  }
}
.avatar-offline-bottom {
  &:before {
    content: "";
    @apply bg-base-200 outline-base-100 absolute z-10 block rounded-full outline outline-2;
    width: 20%;
    height: 20%;
    bottom: 3%;
    right: 3%;
  }
}
.avatar-busy-bottom {
  &:before {
    content: "";
    @apply bg-error outline-base-100 absolute z-10 block rounded-full outline outline-2;
    width: 20%;
    height: 20%;
    bottom: 3%;
    right: 3%;
  }
}
.avatar-away-bottom {
  &:before {
    content: "";
    @apply bg-warning outline-base-100 absolute z-10 block rounded-full outline outline-2;
    width: 20%;
    height: 20%;
    bottom: 3%;
    right: 3%;
  }
}
